<template>
<div>
  <MyHeader title="购物车案例"></MyHeader>
  <!-- 便利数组 将对象当成数据传入good里 这里相当于不是原数组进行传值 相当于引用了list里的对象进行传值 又叫引用数据类型 这样传值可以偷个懒 在子组件中进行修改 -->
  <MyGoods
   v-for="obj in list" 
   :key="obj.id"
   :gobj="obj"
   >
   </MyGoods>
  <MyFooter :arr="list" @changeAll="allfn"></MyFooter>
</div>
</template>

<script>
// 1.购物车头部
// 2.下载axios并在main中进行全局配置 并在初始化后时期内请求数据
// 3.将数据渲染到页面上
// 4.在count里进行数据点击添加减少
// 5.进行全选反选
// 6.进行统计数量 状态为true的前提下 把goods_count数量进行统计
// 7.计算总价
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'
export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },
  data(){
    return {
      list:[]
    }
  },
  created(){
// 2.下载axios并在main中进行全局配置 并在初始化后时期内请求数据
    this.$axios({
      url:"/api/cart"
    }).then(res =>{
      console.log(res);
      // 这里将数据赋值给用来接收的空数组
      this.list=res.data.list
    } )
  },
  methods:{
    allfn(boolean){
      // 全选影响小选
      this.list.forEach(obj =>{
        obj.goods_state=boolean
      })
    }
  }
}
</script>

<style>

</style>